<template>
	<view class="pad-16r">
		<view class="bg-white pad-10">
			<view class="eval-title">评价医生</view>
			<view class="eval-doctor">
				<view class="pad-10">
					<image v-if="doctorItem.doctorHead" class="eval-img" :src="hostApi+doctorItem.doctorHead"></image>
					<image v-else class="eval-img" src="/static/images/hospital/defaultDoctor.png"></image>
				</view>
				<view class="center">
					<view>
						<view class="font-size-20">{{doctorItem.doctorName}}({{doctorItem.jobTitle}})</view>
						<view class="color-gray mar-5-0">{{doctorItem.departmentName}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fraction">
			<view class="fraction-title">请为本次服务评分</view>
			<view class="color-gray">
				<view class="flex-start">
					<view>服务态度</view>
					<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"
						v-model="form.fractionServe"></u-rate>
				</view>
				<view class="flex-start">
					<view>专业水平</view>
					<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"
						v-model="form.fractionSpeciality"></u-rate>
				</view>
				<view class="flex-start">
					<view>信息告知</view>
					<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"
						v-model="form.fractionInfo"></u-rate>
				</view>
				<view class="flex-start">
					<view>响应速度</view>
					<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"
						v-model="form.fractionSpeed"></u-rate>
				</view>
			</view>
		</view>
		<view class="fraction">
			<view class="fraction-title">
				请对被刺服务进行评价
			</view>
			<view>
				<view class="color-gray">
					快捷评价选项
				</view>
				<view class="flex-wrap">
					<view v-for="(item,index) in list">
						<view class="item" @click="changeFast(item)">{{item}}</view>
					</view>
				</view>
			</view>
			<view class="mar-10-0">
				<u-input v-model="form.describe" type="textarea" placeholder="请输入内容" :border="true" :height="100"
					:auto-height="true" />
			</view>
		</view>
		<ButtonVue content="提交" @click="confirm"></ButtonVue>
	</view>
</template>

<script>
	import ButtonVue from '../../components/Button/Button.vue';
	import {
		selectDoctorEvaluate,
		doctorEvaluateAdd
	} from '../../api/doctorEvaluate';
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			ButtonVue,
		},
		onLoad(e) {
			this.doctorItem = JSON.parse(e.item)
		},
		data() {
			return {
				doctorItem: {},
				form: {
					fraction: 0,
					fractionServe: 0,
					fractionSpeciality: 0,
					fractionInfo: 0,
					fractionSpeed: 0,
					describe: ''
				},
				list: ["医术高超", "和蔼可亲", "服务高效"],
			}
		},
		computed: {
			...mapGetters(['hostApi', "userInfo"])
		},

		mounted() {

		},
		methods: {
			confirm() {
				if (!this.form.describe) {
					this.$u.toast('请输入评价内容');
					return
				}
				this.form.doctorCode = this.doctorItem.doctorCode
				this.form.doctorName = this.doctorItem.doctorName
				this.form.status = 1
				this.form.patId = this.userInfo.patId
				this.form.patName = this.userInfo.patName
				this.form.patHeadImg = this.userInfo.patHeadImg
				this.form.payOrderNo = this.doctorItem.payOrderNo
				doctorEvaluateAdd(this.form).then(res => {
					uni.navigateBack(1)
					
				})
			},
			changeFast(item) {
				this.form.describe = item;
			}
		}
	}
</script>

<style scoped>
	.eval-title {
		border-left: 3px solid blue;
		padding: 0 10px;
		margin: 10px 0;
	}

	.eval-doctor {
		background-color: rgb(235, 242, 255);
		display: flex;
		justify-content: flex-start;
		border-radius: 16rpx;
	}

	.eval-img {
		width: 70px;
		height: 70px;
		border-radius: 90px;
	}

	.fraction {
		background-color: white;
		border-radius: 16rpx;
		margin: 10px 0;
		padding: 16rpx;
	}

	.fraction-title {
		margin: 10px 0;
		font-size: 16px;
	}

	.item {
		padding: 5px 10px;
		background-color: rgb(242, 242, 242);
		margin: 10px;
		border-radius: 16px;
	}
</style>